<template>
  <view class="replyComBox">
    <!-- 底部操作栏                                 -->
    <view v-show="!isFocused">
      <view class="main">
        <!-- 输入框 -->
        <view type="text" class="input" @click.stop="isFocused = true">
          <uni-icons
            type="map-pin-ellipse"
            size="16"
            color="rgb(112, 109, 109)"
          ></uni-icons>
          <input
            type="text"
            placeholder="说点啥吧..."
            :value="editValue"
            disabled
          />
        </view>

        <!-- 操作选项 -->
        <view class="choose">
          <!-- 分享 -->
          <button class="item" open-type="share">
            <uni-icons
              type="paperplane-filled"
              size="22"
              color="rgb(112, 109, 109)"
            ></uni-icons>
            <text>分享 </text>
          </button>

          <!-- 点赞 -->
          <view class="item" @click="emit('thumbsUp')">
            <uni-icons
              type="heart-filled"
              size="22"
              :color="props.isThumbsUp ? 'rgb(245, 82, 82)':'rgb(112, 109, 109)' "
            ></uni-icons>
            <text>点赞</text>
          </view>

          <!-- 评论数 -->
          <view class="item">
            <uni-icons
            type="chat-filled"
            size="22"
            color="rgb(112, 109, 109)"
          ></uni-icons>
            <text>{{ props.commentsList }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 编辑框 -->
    <view v-show="isFocused">
      <view class="textarea" @click.stop="isFocused = false">
        <textarea
          cursor-spacing="120"
          class="edit"
          :focus="isFocused"
          :show-confirm-bar="false"
          :auto-focus="isFocused"
          :value="editValue"
          placeholder="说点什么呗..."
          placeholder-class="textarea-placeholder"
          maxlength="500"
          @input.stop="editEnd"
          @click.stop=""
        />
        <view
          :class="{ send: true, sendDisabled: editValue == '' }"
          @click="send($event)"
          >{{ editValue == '' ? '取消' : '发送' }}</view
        >
      </view>
    </view>
  </view>
</template>

<!-- 回复组件 -->
<script lang="ts" setup>
import uniIcons from '@/components/uni/uni-icons/uni-icons.vue'
import {
  ref,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
} from 'vue'

//接受父组件传递数据
const props = defineProps({
  commentsList: {
    type: Number,
  },
  isThumbsUp: {
    type: Boolean,
    default: false,
  },
})

//自定义事件,提交评论、点赞
const emit = defineEmits(['send', 'thumbsUp'])

//编辑框的值
const editValue = ref<string>('')

//编辑框是否获取焦点
const isFocused = ref<boolean>(false)

//编辑框输入事件
const editEnd = (e: any) => {
  editValue.value = e.target.value
}

//发送内容事件
const send = (e: Event) => {
  if (editValue.value != '' && editValue.value.trim()) {
    isFocused.value = false
    emit('send', editValue.value)
    setTimeout(() => {
      editValue.value = ''
    }, 200)
  }
}

// 组件周期函数--监听组件挂载完毕
onMounted(() => {})
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {})
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {})
// 组件周期函数--监听组件激活(显示)
onActivated(() => {})
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {})
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {})
</script>

<style scoped lang="scss">
.replyComBox {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 15rpx 0 0;
  color: rgb(108, 105, 105);

  .main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 10rpx 10rpx 10rpx 10rpx rgb(200, 199, 199);

    .input {
      display: flex;
      align-items: center;
      width: 500rpx;
      height: 65rpx;
      border-radius: 35rpx;
      background-color: rgba(197, 194, 194, 0.417);
      font-size: 26rpx;
      text-indent: 10rpx;
      padding-left: 10rpx;

      image {
        width: 35rpx;
        height: 35rpx;
        margin-left: 5rpx;
      }

      input {
        width: calc(100% - 67rpx);
        padding-right: 15rpx;
      }
    }

    .choose {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;

      button {
        background-color: transparent !important;
        padding: 10rpx !important;
        line-height: inherit !important;
        margin: 0 !important;
        width: auto !important;
        font-weight: 500 !important;
        border-radius: none !important;

        &::after {
          border: none !important;
          padding: 0 !important;
          margin: 0 !important;
        }
      }

      image {
        width: 40rpx;
        height: 40rpx;
      }
      .item {
        display: flex;
        align-items: center;
        flex-direction: column;
        min-width: 70rpx;
        color: rgb(108, 105, 105) !important;
        font-size: 24rpx !important;
        width: -moz-fit-content;
        width: -webkit-fit-content;
        width: fit-content;
      }
    }
  }

  .textarea {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: rgba(47, 46, 46, 0.562);
    display: flex;
    flex-direction: column;

    .edit {
      width: 100%;
      height: 150rpx !important;
      margin-top: auto;
      padding: 15rpx 15rpx 60rpx 15rpx;
      background-color: rgb(255, 255, 255);
    }

    .send {
      position: absolute;
      bottom: 15rpx;
      right: 30rpx;
      color: rgb(255, 255, 255);
      border-radius: 8rpx;
      font-size: 26rpx;
      width: fit-content;
      padding: 5rpx 15rpx;
      background-color: rgb(240, 82, 82);
      z-index: 9;
    }
    .sendDisabled {
      background-color: rgb(198, 195, 195) !important;
    }
  }
}
</style>
